<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表页</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body> 
    <div class="header">
      <img src="images/logo.png" alt="" />
    </div>
    <div class="title">
    <div class="header-nav">
      <div class="nav-start">
        <i class="icon"></i>
        <span class="text first">深圳</span>
        <span class="text">&lt;切换&gt;</span>
      </div>
      <div class="nav-title">
        <a href="#">首页</a>
      <a href="#">资讯</a>
      <a href="#">测评</a>
      <a href="#">商城</a>
      </div>
      <div class="nav-end">
        <span class="icon"></span>
        <span class="person">个人中心</span>
      </div>
    </div>
  </div>
    <div class="container">
      <div class="list">首页&nbsp;&nbsp;>&nbsp;&nbsp;预防装修污染&nbsp;&nbsp;>&nbsp;&nbsp;材料库</div>
     
      <div class="type">
        <div  class="type1">
          <ul>
            <li><a href="#" style="color: #38C5C5;">类别</a></li>
            <li><a href="#">全部</a></li>
            <li><a href="#">地板</a></li>
            <li><a href="#">涂料</a></li>
            <li><a href="#">墙纸</a></li>
            <li><a href="#">瓷砖</a></li>
            <li><a href="#">粘胶剂</a></li> 
            <li><a href="#">油漆</a></li>
            <li><a href="#">家具</a></li>
            <li><a href="#">板材</a></li>
            <li><a href="#">饰品</a>
              <span><img src="images/indexSelect.png"></span>
            </li>
          </ul>
        </div>
        <div  class="type2">
          <ul>
            <li><a href="#" style="color: #38C5C5;">类型</a></li>
            <li><a href="#">全部</a></li>
          </ul>
        </div>
        <div class="type3">
          <ul>
            <li><a href="#" style="color: #38C5C5;">材质</a></li>
            <li><a href="#">全部</a></li>
            <li><a href="#">实木</a></li>
            <li><a href="#">复合</a></li>
            <li><a href="#">强化</a></li>
            <li><a href="#">其他</a></li>
          </ul>
        </div>
        <div  class="type4">
          <ul>
            <li><a href="#" style="color: #38C5C5;">品牌</a></li>
            <li><a href="#">全部</a></li>
            <li><a href="#">圣象</a></li>
            <li><a href="#">大自然</a></li>
            <li><a href="#">生活家</a></li>
            <li><a href="#">北美枫情</a></li>
            <li><a href="#">德尔</a></li>
            <li><a href="#">博典</a></li>
            <li><a href="#">船王</a></li>
          </ul>
        </div>
      </div>
        
      <!-- 搜索框区域 -->
      <div class="nav">
        <span>发布时间&nbsp;<img src="images/downicon.png" />&nbsp;</span>
        <span>价格&nbsp;<img src="images/upicon.png" />&nbsp;</span>
        <span>环保节能&nbsp;<img src="images/upicon.png" /></span>
        <div class="search">
          <input class="search-input" type="text" placeholder="搜索" />
          <button class="button">搜索</button>
        </div>
        <div class="understand">
          <span class="icon"></span>
          <span>了解家居医生建材环保评级标准</span>
        </div>
      </div>
      <!-- 商品列表区域 -->
      <div class="goods-list">
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  orange">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: orange">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color:  rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
        <div class="goods">
          <img src="images/data_image.png" alt="" />
          <p style="color: rgb(87, 85, 85)">
            德尔&nbsp;&nbsp;&nbsp;&nbsp;都市系列3001<br />
            木地板 - 复合地板<br />
            单价：128元/m^2<br />
            <span style="color: deepskyblue">环保评级:B&nbsp;(可以使用)</span>
          </p>
        </div>
      </div>
      <!-- 页码区域 -->
      <div class="yema">
        <button class="btn1">上一页</button>
        <a href="#">1</a>
        <a href="#" style="color: orangered;">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <button class="btn1" style="margin-left:20px;">下一页</button>

        <span>共有10页，去第 <input class="input2" type="text" /> 页</span>
        <button class="btn2">确定</button>
      </div>
      <!-- 二维码区域 -->
      <table border="0">
      <tr>
        <td rowspan="2">
        <img class="weixin" src="images/small_weixin.png" alt=""></td>
        <td>
      <ul>
        <li style="color: deepskyblue; font-size: 18px;margin-bottom: 10px;">建材检测&nbsp;&nbsp;需求反馈</li>
        <li style="font-size: 15px;">亲爱的用户，我们正在不断的完善和更新建材库</li>
        <li style="font-size: 15px;">若没有找到你想要的材料信息，请将您想测的建材告诉我们。</li>
        </li>
        </ul>
      </td>
    </tr>
      </table>
    </div>


    <footer>
      <div class="footer-content">
          <div class="footer-top">
            <div class="home"> 
              <img src="images/footerLogo.png">
              <p class="wei">为室内环境健康把好每一关</p>
              <p>家居医生致力于中国人的家居健康问题，通过专业的技术研究</p>
              <p>和测评，倾力协助大众打造绿色、环保的人居生活环境</p>
            </div>
            <div class="gy">
              <p><a href="#">关于我们</a></p>
              <p><a href="#">联系我们</a></p>
              <p><a href="#">加入我们</a></p>
            </div>
            <div class="bq">
              <p><a href="#">版权说明</a></p>
              <p><a href="#">用户隐私</a></p>
              <p><a href="#">免费申明</a></p>
            </div>
            <div class="wx">
              <p>
                <img src="images/weixin2.png">
                <a href="#">&nbsp;官方微信</a>
              </p>
              <p>
                <img src="images/tianmao.png">
                <a href="#">&nbsp;天猫旗舰店</a>
              </p>
              <p>
                <img src="images/shop.png">
                <a href="#">&nbsp;有赞商城</a>
              </p>
            </div>
          </div>

            <div class="line"></div>
            <span class="sp1">深圳建筑科学研究院股份有限公司</span>
            <span class="sp2">家居医生网</span>
            <span class="sp3">粤ICP备08011321号&copy;Copynight All Rights Reserved</span>
      </div>
    </footer>
  </body>
</html>
